<!DOCTYPE html>
<html style="width: 100%; height: 100%; overflow:auto;">

<head lang="en">
  <meta charset="UTF-8">
  <script type="text/javascript" src="scripts/settings.js"></script>
  <script type="text/javascript" src="scripts/errors.js"></script>
  <script type="text/javascript" src="scripts/installer.js"></script>
  <script type="text/javascript" src="scripts/view.js"></script>
  <link rel="stylesheet" type="text/css" href="styles/main.css">

  <script>
    // dynamically add the <title> element
    const title = document.createElement("title");
    title.innerText = `${settings.productName} Installer`;
    document.querySelector("head").appendChild(title);
  </script>
  
</head>

<body>
  
  <header class="extension-details">
    <img class="icon icon--large" src="images/prodIcon.png" alt="" />
    <hgroup>
      <h1 class="title"></h1>
      <h2 class="version"></h2>
    </hgroup>

  </header>

  <main class="views">

    <article class="view view--loading view--active">
      <h1>Loading</h1>
      <p>Checking your device...</p>
    </article>

    <article class="view view--uninstall">
        <h1>Fuse Fonts is already installed</h1>
        <p>You can use this tool to uninstall the <span class="app-name">...</span> extension.</p>
        <section class="actions">
          <button class="uninstall primary" disabled>Uninstall</button>
          <span>or</span>
          <button class="exit secondary" disabled>Exit</button>
        </section>
      </article>

    <article class="view view--install">
      <h1>Get Started</h1>
      <p>Use this tool to install the <span class="app-name">...</span> extension.</p>
      <section class="actions">
        <button class="install primary" disabled>Install</button>
        <span>or</span>
        <button class="exit secondary" disabled>Exit</button>
      </section>
    </article>

    <article class="view view--working">
      <h1>Installing...</h1>
      <div class="progressContainer">
        <div id="progressTrack"></div>
      </div>
    </article>

    <article class="view view--errors">
      <h1>There was a problem.</h1>
      <p class="message"></p>
      <section class="actions">
        <button class="exit secondary" disabled>Exit</button>
      </section>

      <!-- This section will only display if supportURL of package.json is defined -->
      <div class="support" style="display: none">
        <hr />
        <p>
          If you think this is a bug, contact support at <code>support@fusefonts.com</code> or file an issue.
        </p>
        <p>
          <button class="support-url primary">File an Issue</button>
        </p>
      </div>
    </article>

    <article class="view view--complete">
      <h1>Success!</h1>
      <p>You will need to restart Photoshop for changes to take effect.</p>
      <div class="actions">
        <button class="exit" disabled>Close</button>
      </div>
    </article>
  </main>

  <footer class="carousel" style="display: none">
    <p class="message">
      Instructions for using Fuse Fonts can be found at <a class="learn-more">fusefonts.com/learn</a>.
    </p>
    <p>If you want to send feedback or request features, email hello@fusefonts.com</p>
  </footer>

  <script type="text/javascript" src="scripts/main.js"></script>
</body>

</html>